<template>
  <div class="wrap">
    <cate
      :search="handleSearch"
      v-model:searchParams="searchParams"
      v-model:form="searchParams"
      v-model:type="props.type"
    ></cate>
    <div class="wrap_right">
      <BaseForm
        ref="searchForm"
        type="search"
        :items="formItems"
        v-model:form="searchParams"
        @search="handleSearch"
      >
        <template #suffix-button>
          <el-button type="primary" @click="handleEdit({})">
            <el-icon>
              <Plus />
            </el-icon>
            添加
          </el-button>
        </template>
      </BaseForm>

      <BaseTable
        ref="baseTable"
        :getTableDataFn="tagService.getTagList"
        :searchParams="searchParams"
        :serial="true"
      >
        <el-table-column prop="tagName" label="标签名称" min-width="170" />

        <el-table-column prop="categoryName" label="所属分类" min-width="170" />
        <el-table-column prop="updateTime" label="最后修改时间" min-width="170">
          <template #header>
            <span>最后修改时间</span>
            <SortTable
              :sortTablekey="sortTablekey"
              @click="sortTablekey = 1"
              :handleSearch="handleSearch"
            >
            </SortTable>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scope">
            <el-link
              :underline="false"
              link
              type="primary"
              size="small"
              @click.prevent="handleEdit(scope.row)"
              >编辑</el-link
            >

            <el-link
              :underline="false"
              link
              type="danger"
              size="small"
              @click.prevent="handleDel(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <EditForm
      v-if="visibleEditForm"
      v-model:searchParams="searchParams"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
      v-model:type="props.type"
    >
    </EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from './EditForm.vue'
import cate from './cate.vue'
import { contentManagementService } from '@/api/contentManagement'
import openMsgBox from '@/hooks/messageBox.js'
import { tagService } from '@/api/tag'
const props = defineProps({
  type: {
    type: String,
  },
})
const formItems = ref([
  {
    name: '标签名称',
    key: 'tagName',
    type: 'input',
  },
])
const searchParams = ref({
  categoryId: '',
  tagName: '',
  type: props.type,
})
const baseTable = ref(null)
const sortTablekey = ref(1)

const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0
  baseTable.value.handleSearch({
    ...searchParams.value,
    type: props.type,
    updateTimeOrder: data?.sort,
  })
}
const item = ref({})
const visibleEditForm = ref(false)
const handleEdit = (row) => {
  item.value = { ...row }
  visibleEditForm.value = true
}
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return tagService.delTag({ data: row.tagId })
    },
    () => {
      handleSearch()
    }
  )
}
</script>

<style lang="less" scoped></style>
